<template>
	<view class="popup popup--fixed popup-request flex--col" :class="{'active':visible}">
		<view class="route-request flex--col">
			<view class="route-request-info flex--col">
				<view class="request-info-name">
					<text class="text--main-dark">{{route.name}}</text>
				</view>
				<view class="request-info-time flex--row">
					<view class="time-item flex--col">
						<text class="text--secondary-grey">启程时间</text>
						<text class="text--thirdary-dark">{{expectedDate.startTime}}</text>
					</view>
					<view class="line">
					</view>
					<view class="time-item flex--col">
						<text class="text--secondary-grey">出发日期</text>
						<text class="text--thirdary-dark">{{expectedDate.date}}</text>
					</view>
					<view class="line">
					</view>
					<view class="time-item flex--col">
						<text class="text--secondary-grey">结束时间</text>
						<text class="text--thirdary-dark">{{expectedDate.endTime}}</text>
					</view>
				</view>
				<view class="request-info-apply ">
					<view class="apply-buttons flex--row">
						<view class="apply-button apply-button--accept" :class="{'ignore':rejecting}" @click.stop="handleAccept">
							<text>接受</text>
						</view>
						<view class="apply-button apply-button--reject"  :class="{'active':rejecting}" @click.stop="handleReject">
							<text>拒绝</text>
						</view>
					</view>
					<view class="apply-reason flex--row" :class="{'active':rejecting}">
						<input type="text" placeholder="填写拒绝理由" v-model="refuseReason"/>
					</view>
					
				</view>
			</view>
			<view class="route-request-spots" @click="close">
				<view class="spots-list flex--col">
					<view class="spots-detail  flex--row" v-for="(spot,index) in route.routeAttractionsList">
						<view class="detail-side detail-side--content flex--row">
							<view class="detail-image icon--large">
								<image :aria-label="spot.name+'照片'" :src="spot.img" mode="center"></image>
							</view>
							<view class="detail-desc  flex--col">
								<text class="text--secondary-dark text-ellipsis">{{spot.name}}</text>
								<text class="text--thirdary-dark text-ellipsis">{{spot.description}}</text>
							</view>
						</view>
						<view class="detail-side detail-side--icon">
							<image :aria-label="'第'+(index+1)+'站'" :src="`../../static/numbers/${index+1}.svg`" class="icon"></image>
						</view>
					</view>
				
				</view>
				
				<view class="route-indicator flex--row">
					<view class="route-indicator-item">
						<image src="@/static/coin.svg" class="icon">
						<text class="text--thirdary-grey">{{route.amount}}元</text>
					</view>
					<view class="route-indicator-item">
						<image src="@/static/distance.svg" class="icon">
						<text class="text--thirdary-grey">{{route.distance}}km</text>
					</view>
					<view class="route-indicator-item">
						<image src="@/static/time.svg" class="icon">
						<text class="text--thirdary-grey">{{route.time}}h</text>
					</view>
				</view>
			</view>
		</view>
		<view  class="popup popup--absolute popup-request-background">
		</view>
	</view>
</template>

<script>
	import * as VolunteerApi from "@/api/assist/volunteer.js"
	import {timeFormat} from "@/utils/util.js"
	import { REFERSH_TRAVEL_TIMER } from "@/core/constant/event"
	export default {
		emits:['applyRequest'],
		data(){
			return {
				route:{},
				visible:false,
				rejecting:false,
				refuseReason:"",
				travelApplyId:0,
			}
		},
		computed:{
			expectedDate(){
				return timeFormat(this.route.startTime,this.route.endTime)
			}
		},
		methods:{
			open(route,travelApplyId){
				this.route = route
				this.travelApplyId = travelApplyId
				this.visible = true
			},
			close(){
				this.visible = false
				this.route = {}
				this.rejecting = false
				this.refuseReason = ''
			},
			async handleAccept(){
				this.rejecting = false
				const applyState = {
					status:1,
				}
				await this.applyRequest(applyState)
				uni.$emit(REFERSH_TRAVEL_TIMER)
				this.close()
			},
			async handleReject(){
				if(!this.rejecting){
					this.rejecting = true
					return
				}
				const applyState = {
					status:2,
					refuseReason:this.refuseReason
				}
				await this.applyRequest(applyState)
				this.close()
			},
			async applyRequest(applyState){
				const params = {
					...applyState,
					travelApplyId:this.travelApplyId,
				}
				try{
					await VolunteerApi.applyRequest(params)
					this.$emit('applyRequest',params)
				}catch(err){
					this.$error(err.errMsg)
				}
			}
			
		}
	}
	
</script>

<style lang="scss" scoped>
	.line{
		height: 80%;
		width: 1px;
		background-color: #777;
	}
	
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark{
		font-size: 18px;
		font-weight: 600;
		color:#333;
	}
	
	.text--secondary-grey{
		font-size: 18px;
		font-weight: 600;
		color:#777;
	}
	
	.text--thirdary-dark{
		font-size: 16px;
		font-weight: 500;
		color:#333;
	}
	
	.text--thirdary-grey{
		font-size: 14px;
		font-weight: 500;
		color:#777;
	}
	
	
	.popup-request{
		width:100%;
		height:100vh;
		top:0%;
		left:0%;
		background:transparent;
		
		justify-content: center;
		align-items: center;
		
		display:none;
		&.active{
			display:flex;
		}
	}
	
	
	.popup-request-background{
		width:100%;
		height:100%;
		background-color: rgba(0,0,0,0.3);
		z-index:98;
	}
	
	.route-request{
		z-index:99;
		width:600rpx;
		height:100%;
		gap:20px;
		
		justify-content: center;
		&>view{
			@include border-four-roundings;
			justify-content: space-around;
			background-color: #fff;
		}
	}
	
	/* 路线信息 */
	.route-request-info{
		padding:16px 8px;
		gap:12px;
		.request-info-name{
			text-align: center;
		}
		
		.request-info-time{
			justify-content: space-between;
			align-items: center;
			margin-bottom: 12px;
		}
		
		.request-info-apply{
			
			.apply-buttons{
				align-items: center;
				justify-content: space-around;
				margin-bottom: 12px;
			}
			
			.apply-reason{
				height:0px;
				justify-content: center;
				visibility: hidden;
				
				
				input{
					height:0px;
					border-radius: 10px;
					border:1px solid #333;
					transition:all 0.3s;
					width:80%;
					padding:0px 8px;
					background-color: #fff;
				}
				
			}
			
			.apply-reason.active{
				visibility: visible;
				height:auto;
				input{
					height:32px;
				}
			}
			
		}
		
		.time-item{
			text-align: center;
			& text:first-child{
				display: inline-block;
				margin-bottom: 12px;
			}
		}
		
		.apply-button{
			font-size: 18px;
			font-weight: 600;
			text-align: center;
			
			width:1.6rem;
			padding:4px 2px;
			color:#555;
	
			border-radius:14px;
			&--accept{
				border:1.5px solid #ff8d1a;
				color:#ff5410;
			}
			&--accept.ignore{
				border:none;
			}
			
			&--reject.active{
				border:1.5px solid #333;
			}
		}
	}
	
	/* 路线景点 */
	.route-request-spots{
		padding:15% 0%;
		.spots-list{
			gap:12px;
			margin-bottom: 12px;;
		}
		
		.spots-detail{
			justify-content: space-between;
			align-items: center;
			padding:0% 5%;
		}
	}

	
	/* 路线景点项 */
 	.detail-side{
		gap:4px;
		
		&--content{
			width:80%;
		}
		
		&--icon{
			width:auto;
		}
	}
	
	.detail-image{
		@include border-four-roundings;
		overflow: hidden;
		padding:2px;
		width:35%;
		image{
			width:100%;
			height:100%;
			border-radius: 10px;
		}
	}
	
	.detail-desc{
		width:60%;
		padding:6px 0px;
		justify-content: space-between;
	}

	/* 路线指标：距离、花费、时间*/
	.route-indicator{
		justify-content: center;
		gap:12px;
		 image {
			vertical-align: middle;
		}
	}
</style>